<div id="mis-datos-tabs">
    <ul class="resp-tabs-list">
        <li id="sobreMiTab"> Sobre mi </li>
        <li id="ubicacionTab" class="loadMap"> Mi ubicación </li>
        <li id="caracteristicasTab"> Características </li>
        <li id="preferenciasTab"> Preferencias </li>
    </ul>

    <div class="resp-tabs-container">
        <div>
            {% include "UserBundle:Edit:form_sobre-mi.html.twig" with {form:sobreMiForm} %}
        </div>
        <div>
            {% include "UserBundle:Edit:form_mi-ubicacion.html.twig" with {form:miUbicacionForm} %}
        </div>
        <div>
            {% include "UserBundle:Edit:form_caracteristicas.html.twig" with {form:caracteristicasForm} %}
        </div>
        <div>
            {% include "UserBundle:Edit:form_preferencias.html.twig" with {form:preferenciasForm} %}
        </div>
    </div>
</div>

<script type="text/javascript">

    $(function() {

        $("#mis-datos-tabs").easyResponsiveTabs({
            type: 'vertical', //Types: default, vertical, accordion
            width: 'auto', //auto or any custom width
            fit: true   // 100% fits in a container
        });

        $(document).foundationCustomForms();

        $(".loadMap").click(function() {
            setTimeout(function(){
                loadMapFromInputs();
            },100);
        });

        {% if(tabToShow) %}
            $("#{{ tabToShow }}").click();
        {% endif %}
            
    });

</script>